<!DOCTYPE html>
<html lang="en" ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular file upload</title>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../blueInk/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../blueInk/css/loading.css">
</head>


<body>

<form role="form">
    <div class="form-group">
        <p id="hint">请选择image，最多四张图片</p>

        <div id='uploadFileContainer'>
            <input type="file" id="uploadFile">
        </div>
    </div>
    <input id="submit" type="button" class="btn btn-default" value='提交'/>
</form>


<!-- image preview -->
<div class="form-group col-sm-6 col-md-3 preview">
</div>

<!-- loading -->
<div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>

<!--js file-->
<script src="../js/lib/jquery.js"></script>

<script type="text/javascript">
    var fileArr = [];
    var count = 0;
    $('#uploadFile').on('change', loadFileEvent);
    $('#submit').on('click', uploadOne);

    function loadFileEvent(event) {
        console.log('loadFileEvent');

        var blobData = event.target.files[0];
        var name = blobData.name;
        // var size = blobData.size;
        var oneFile = {
            fileBlob: blobData,
            fileName: name
        };

        console.log('name=' + name);
        fileArr.push(oneFile);

        var reader = new FileReader();
        reader.readAsDataURL(blobData);
        var nowCount = count;
        reader.onload = function (e) {
            var fileData = e.target.result;
            $('.preview').append("<img class='itemView' width='150' margin='10px'/> <br/>");
            $('.itemView')[nowCount].src = fileData;
        };
        count++;
    }

    function uploadOne() {
        var oneFile = fileArr[0];
        var succ = function (res) {
            console.log('success');
            console.log(res);
        };
        var fail = function (res) {
            console.log('fail');
            console.log(res);
        };
        uploadFile(oneFile, succ, fail);
    }

    function uploadFile(oneFile, succ, fail) {
        console.log('uploadFile');
        var formData = new FormData();
        formData.append("fileBlob", oneFile.fileBlob);
        formData.append("fileName", oneFile.fileName);
        // save
        $.ajax({
            url: "/api/upload",
            type: "POST",
            processData: false,
            contentType: false,
            data: formData,
            success: succ,
            error: fail
        });
    }
</script>
</body>
</html>